<template>
	<h1>App</h1>
	<p>{{ count }}</p>
	<p>{{ times }}</p>
	<button @click="handleClick">按钮</button>
	<input type="text" v-model="userForm.username" />
	<input type="password" v-model="userForm.password" />

	<AComp :count="count" :age="18" @click="handleClick" />
</template>

<script>
import {
	ref,
	reactive,
	watch,
	computed,
	onMounted,
	onBeforeUnmount,
	// nextTick
} from "vue";

import AComp from "./AComp.vue";

export default {
	name: "App",
	// 组合式和响应式API
	setup() {
		// 生命周期函数
		onMounted(() => {
			console.log("mounted");
		});

		onBeforeUnmount(() => {
			console.log("beforeUnmount");
		});
		// 定义响应式数据
		// ref定义单个响应式数据
		// ref调用传递的参数，是初始化，返回值就一个响应式数据
		const count = ref(0);
		// reactive定义多个响应式数据：常用于表单项
		const userForm = reactive({
			username: "",
			password: "",
		});

		// console.log(count.value);
		// 定义方法
		const handleClick = () => {
			// count++ // ref不能直接操作
			count.value++;
		};

		// 定义监视属性
		watch(
			count,
			(newVal, oldValue) => {
				console.log(newVal, oldValue);
			},
			{
				immediate: true,
				deep: true,
			}
		);

		// 定义只读的计算属性
		// const times = computed(() => {
		// 	return `${count.value} 次`;
		// });

		// 定义可读可写的计算属性
		const times = computed({
			get() {
				return `${count.value} 次`;
			},
			set(val) {
				console.log(val);
			},
		});

		// return的对象上的属性，会作为this的属性
		return {
			count,
			handleClick,
			userForm,
			times,
		};
	},
	components: {
		AComp,
	},
};
</script>

<style></style>
